{% extends "base.html" %}
{% block title %}{{ SITENAME }} - {{ article.title|striptags }}{% endblock %}

{% block head %}
  {{ super() }}

  {% if article.keywords %}
    {% for keyword in article.keywords %}
    <meta name="keywords" contents="{{keyword}}" />
    {% endfor %}
  {% endif %}

  {% if article.description %}
    <meta name="description" content="{{article.description}}" />
  {% endif %}

  {% for tag in article.tags %}
    <meta name="tags" content="{{tag}}" />
  {% endfor %}

  {% block extra_css %}
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  {% endblock %}

{% endblock %}

{% block content %}
<div class="el-article-path">
  <a style="text-decoration: none;" href="/index.html" title="首页"><button class="mdl-button mdl-js-button mdl-button--primary">
    <i class="material-icons">home</i>
  </button></a>
  <button class="mdl-button mdl-js-button mdl-button--primary" disabled>
    / 
  </button>

  {% if article.category %}
  <a style="text-decoration: none;" href="{{ SITEURL }}/{{ article.category.url }}" title="{{ article.category }}分类页"><button class="mdl-button mdl-js-button mdl-button--primary">
    {{ article.category }}
  </button></a>
  {% endif %}
  
  <button class="mdl-button mdl-js-button mdl-button--primary" disabled>
    / {{ article.title }}
  </button>
</div>

<div class="el-blog mdl-cell mdl-cell--12-col mdl-card">

    <div class="mdl-card__media mdl-color-text--grey-50" style="{% if article.image %}background-image: url({{ article.image }});{% endif %}{% if article.color %}background-color: {{article.color}};{% endif %}">
        <h4>{{ article.title }}</h4>
    </div>

    <div class="mdl-color-text--grey-700 elst mdl-card__supporting-text">
        <div>
            {% if article.modified %}
            <button class="mdl-button mdl-js-button" disabled style="min-width: 90;line-height: 1em">
                <div style="font-size: 0.5em">发布:{{ article.locale_date }}</div>
                <div style="font-size: 0.5em">更改:{{ article.locale_modified }}</div>
            </button>
            {% else %}
            <button class="mdl-button mdl-js-button" disabled style="min-width: 90;">
              <div>发布：{{ article.locale_date }}</div>
            </button>
            {% endif %}
        </div>

        <div class="el-tag-btn">分类:
            {% if article.category %}
            <a style="text-decoration: none;" href="{{ SITEURL }}/{{ article.category.url }}"><button class="mdl-button mdl-js-button mdl-button--primary">
              {{ article.category }}
            </button></a>
            {% endif %}
        </div>
        
        <div class="section-spacer"></div>

        {% if article.tags %}
        <div class="el-tag-btn">标签:
            {% for tag in article.tags %}
            <a style="text-decoration: none;" href="{{ SITEURL }}/{{ tag.url }}"><button class="mdl-button mdl-js-button mdl-button--primary">
              {{ tag }}
            </button></a>
            {% endfor %}
        </div>
        {% endif %}
    </div>

    <div class="mdl-color-text--grey-700 mdl-card__supporting-text">
        {{ article.content }}
    </div>
    
</div>

{% if GITALK_GITHUB_ID %}
<div id="gitalk-container" class="mdl-card__supporting-text el-comments">
</div>
{% endif %}

<div class="mdl-card__supporting-text">
    {% if article.prev_article %}
    <a style="float:left;" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--primary" href="{{ SITEURL }}/{{ article.prev_article.url}}" title="{{ article.prev_article.title }}">
      <i class="material-icons">arrow_back</i>{{ article.prev_article.title|truncate(40) }}
    </a>
    {% endif %}
    
    {% if article.next_article %}
    <a style="float: right;" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--primary" href="{{ SITEURL }}/{{ article.next_article.url}}" title="{{ article.next_article.title }}">
      {{ article.next_article.title|truncate(40) }}...<i class="material-icons">arrow_forward</i>
    </a>
    {% endif %}
</div>

{% endblock %}

{% block sidebar_head %}

{% if article.similar_posts %}
<div class="mdl-card mdl-cell mdl-cell--12-col">
    <div class="mdl-card__title mdl-card--border">
        <h2 class="mdl-card__title-text">文章推荐</h2>
    </div>
    <div class="el-similar mdl-card__supporting-text">
        <ul>
        {% for similar in article.similar_posts %}
            <li><a href="{{ SITEURL }}/{{ similar.url }}">{{ similar.title }}</a></li>
        {% endfor %}
        </ul>
    </div>
</div>
    
{% endif %}

{% endblock %}


{% block sidebar_foot %}

<div class="el-toc mdl-card mdl-cell mdl-cell--12-col">    
  <div class="mdl-card__title mdl-card--border">
      <h4 class="mdl-card__title-text">文章目录</h4>
  </div>
  <div class="mdl-card__supporting-text">
      {% if article.toc %}
          {{article.toc}}
      {% endif %}
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script>
  var gitalk = new Gitalk({
  clientID: '{{ OAUTH_CLIENT_ID }}',
  clientSecret: '{{ OAUTH_CLIENT_SECRET }}',
  repo: '{{ REPO_TO_STORE_COMMENTS }}',
  owner: '{{ GITALK_GITHUB_ID }}',
  admin: ['{{ GITALK_GITHUB_ID }}',],
  id: '{{ article.locale_date }}-{{ article.slug }}',
  distractionFreeMode: false,
  })
  gitalk.render('gitalk-container')
</script>
{% endblock %}